<template>
    <div>
        <div class="title">按年、月、日统计商城交易额、交易量</div>
        <div class="filter-btn">
            <el-col :span="24" class="toolbar">
                <el-date-picker
                        v-model="year"
                        type="year"
                        placeholder="选择年"
                        format="yyyy年"
                        value-format="yyyy"
                        @change="changePayTypeYear">
                </el-date-picker>
                <el-date-picker
                        v-model="month"
                        type="month"
                        placeholder="选择月"
                        format="MM月"
                        value-format="M"
                        @change="changePayTypeMonth">
                </el-date-picker>
                <el-select v-model="storeid" placeholder="全部中心" @change="changePayType">
                    <el-option
                            v-for="item in merchs"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
                <el-select v-model="paytype" placeholder="支付方式" @change="changePayTypeWay">
                    <el-option
                            v-for="item in payment"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" @click="_financeOrder">搜索</el-button>
            </el-col>
        </div>
        <el-table
                :data="financeOrderList"
                style="width: 100%"
                stripe>
            <el-table-column
                    :label="label"
                    width="200"
                    ref="month">
                <template slot-scope="scope">
                    <div>{{ scope.row.i }}</div>
                </template>
            </el-table-column>
            <el-table-column
                    label="收入"
                    width="200">
                <template slot-scope="scope">
                    <span>¥{{ scope.row.income }}</span>
                    <span style="color: #23527c;cursor: pointer;padding-left: 10px" @click="lookDetail(scope.$index, scope.row)">查看</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="支出"
                    width="200">
                <template slot-scope="scope">
                    <span>¥{{ scope.row.expend }}</span>
                    <span style="color: #23527c;cursor: pointer;padding-left: 10px" @click="lookDetailPay(scope.$index, scope.row)">查看</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="交易金额"
                    width="200">
                <template slot-scope="scope">
                    <span>¥{{ scope.row.amount }}</span>
                </template>
            </el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button-group>
                        <el-button size="mini" style="background-color: #1c84c6;color: #fff" @click="exportExcel(scope.$index, scope.row)">导出流水</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import { activeCenter, financeOrder } from '../../api/goodsAPI'
    export default {
        name: "applyAccount",
        data() {
            return {
                year: new Date().getFullYear() + '', // 选择年
                month: '', // 选择月
                storeid: '', // 门店选择
                paytype: '', // 支付方式（1-余额支付 2-支付宝支付 3-微信支付）
                merchs: [], // 商户列表
                newForm: {
                    year: '', // 选择年
                    month: '', // 选择月
                    storeid: '', // 门店选择
                    paytype:'', // 支付方式
                },
                financeOrderList: [], // 财务订单
                payment: [
                    {
                        value: '1',
                        label: '余额支付'
                    },
                    {
                        value: '2',
                        label: '支付宝支付'
                    }, {
                        value: '3',
                        label: '微信支付'
                    }
                ],
                label: '月份'
            }
        },
        created() {
            this._activeCenter() // 获取门店列表
            this._financeOrder() // 财务统计（活动订单）
        },
        methods: {
            _financeOrder() {
                let data = {
                    year: this.newForm.year || this.year - 0,
                    month: this.newForm.month,
                    storeid: this.newForm.storeid,
                    paytype: this.newForm.paytype
                }
                financeOrder(data).then(res => {
                    console.log(data)
                    console.log(res)
                    this.financeOrderList = res.data.list
                    if (res.data.list.length > 12) {
                        this.label = '日期'
                    }
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            _activeCenter() {
                activeCenter().then(res =>{
                    console.log(res)
                    this.merchs = res.data.store
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                })
            },
            // 导出数据
            exportExcel(index, row) {
                const apiUrl = "/admin/finance/orderbill"
                let param = new URLSearchParams();
                // param.append("p", this.currentPage);
                param.append("length", 10000);
                param.append("year", this.newForm.year || this.year)
                param.append("month", row.month || '')
                param.append("storeid", this.newForm.storeid || '')
                param.append("paytype", this.newForm.paytype || '')
                param.append("day", row.day || '')
                // param.append("type", 1)
                // param.append("type", 2)
                // year: this.newForm.year || this.year,
                // month: row.month || '',
                // storeid: this.newForm.storeid || '',
                // paytype: this.newForm.paytype || '',
                // day: row.day || '',
                // type: 1, // 统计方式（1-收入 2-支出）

                // param.append("keyword", this.searchKey);
                // param.append("is_refund", 1);
                // param.append("refund_status", 1);
                // param.append("paytype", this.form.paytype);
                // param.append("startTime", this.form.startTime);
                // param.append("endTime", this.form.endTime);
                // param.append("merch_id", this.form.merch_id);
                param.append("export", 1);
                this.$axios.post(apiUrl, param,{responseType: 'blob'}).then((res) => {
                    console.log( res.data)
                    const link = document.createElement('a')
                    let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'});
                    link.style.display = 'none'
                    link.href = URL.createObjectURL(blob);
                    let num = ''
                    for(let i=0;i < 10;i++){
                        num += Math.ceil(Math.random() * 10)
                    }
                    link.setAttribute('download', '订单流水' + num + '.xlsx')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link)
                }).catch(err => {
                    this.$message({
                        message: err.response.data.message,
                        type: 'error'
                    })
                    console.log(err.response.data)
                })
            },
            // 选择年
            changePayTypeYear(val) {
                console.log(val)
                this.newForm.year = val - 0
            },
            // 选择月
            changePayTypeMonth(val) {
                console.log(val)
                this.newForm.month = val - 0
            },
            // 全部中心
            changePayType(val) {
                console.log(val)
                this.newForm.storeid = val - 0
            },
            // 支付方式
            changePayTypeWay(val) {
                console.log(val)
                this.newForm.paytype = val - 0
            },
            lookDetail(index,row) {
                console.log(index,row)
                this.$router.push({
                    path: '/incomeDetail',
                    query: {
                        year: this.newForm.year || this.year,
                        month: row.month || '',
                        storeid: this.newForm.storeid || '',
                        paytype: this.newForm.paytype || '',
                        day: row.day || '',
                        type: 1, // 统计方式（1-收入 2-支出）
                        length: 10
                    }
                })
            },
            lookDetailPay(index,row) {
                console.log(index,row)
                this.$router.push({
                    path: '/incomeDetail',
                    query: {
                        year: this.newForm.year || this.year,
                        month: row.month || '',
                        storeid: this.newForm.storeid || '',
                        paytype: this.newForm.paytype || '',
                        day: row.day || '',
                        type: 2, // 统计方式（1-收入 2-支出）
                        length: 10
                    }
                })
            }
        }
    }
</script>

<style scoped>
    body {
        color: #676a6c;
    }
    .title {
        font-size: 16px;
        padding-bottom: 5px;
        border-bottom: 1px solid #ddd;
    }
    .filter-btn {
        display: flex;
    }

</style>
